import React, { useEffect, useState } from "react";
import { Button, Form, Input, Col, Checkbox, Row } from "antd";

const fromtype = (props) => {
  const [form] = Form.useForm();
  useEffect(() => {
    if (props.title == "编辑") {
      form.setFieldsValue(props.store);
    }
  });
  const onchange = (checkedValues) => {
    console.log("checked = ", checkedValues);
  };
  const onFinish = (values) => {
    if (props.title == "添加") {
      const obj = {
        key: new Date().getTime(),
        ...values,
      };
      props.onCancel(obj);
    } else {
      const obj = {
        ...props.store,
        key: new Date().getTime(),
        ...values,
      };
      props.onCancel(obj);
    }
  };
  return (
    <Form onFinish={onFinish} style={{ maxWidth: 600 }} form={form}>
      <Form.Item label="姓名" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="简介" name="desc">
        <Input />
      </Form.Item>
      <Form.Item label="标签" name="tags">
        <Checkbox.Group style={{ width: "100%" }} onChange={onchange}>
          <Row>
            <Col span={8}>
              <Checkbox value="前端开发师">前端开发师</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="developer">developer</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="后端工程师">后端工程师</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="全栈工程师">全栈工程师</Checkbox>
            </Col>
          </Row>
        </Checkbox.Group>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          确定
        </Button>
      </Form.Item>
    </Form>
  );
};

export default fromtype;
